<template>
  <el-dialog title="新增员工" :visible="showDialog" :before-close="handleClose">
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="手机" prop="username">
        <el-input
          v-model="formData.username"
          style="width:50%"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="nickname">
        <el-input
          v-model="formData.nickname"
          style="width:50%"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="formData.password"
          type="password"
          style="width:50%"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item label="性别" prop="user_sex">
        <el-select
          v-model="formData.user_sex"
          style="width:50%"
          placeholder="请选择"
        >
          <el-option value="男" label="男" />
          <el-option value="女" label="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="账号状态" prop="status">
        <el-select
          v-model="formData.status"
          style="width:50%"
          placeholder="请选择"
        >
          <el-option value="正常" label="正常" />
          <el-option value="冻结" label="冻结" />
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="user_email">
        <el-input
          v-model="formData.user_email"
          style="width:50%"
          placeholder="请输入邮箱"
        />
      </el-form-item>
      <el-form-item label="微信号" prop="user_wechat">
        <el-input
          v-model="formData.user_wechat"
          style="width:50%"
          placeholder="请输入微信号"
        />
      </el-form-item>
      <el-form-item label="个人介绍" prop="user_introduce">
        <el-input
          v-model="formData.user_introduce"
          style="width:50%"
          placeholder="请输入个人介绍"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="btnSubmit"
          >确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { registerUserAPI, editUserAPI } from '@/api/user'

export default {
  props: {
    showDialog: {
      default: false,
      type: Boolean
    },
    formData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: {
        username: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleClose() {
      this.$message.info('取消操作')
      this.$refs.form.resetFields()
      this.$emit('update:showDialog', false)
    },
    async btnSubmit() {
      const { user_id } = this.formData
      const isEdit = user_id !== ''
      try {
        await this.$refs.form.validate()

        if (!isEdit) await registerUserAPI(this.formData)
        else await editUserAPI({ ...this.formData, id: user_id })

        this.$refs.form.resetFields()
        this.$emit('reload')
        this.$emit('update:showDialog', false)
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
